html, body { margin: 0; padding: 0}
.flexable, .auto-grow {display: flex}
.auto-grow {flex: 1}
.column-mode { flex-direction: column }
.page-header {border-bottom: 1px solid #ccc; padding: 10px; align-items: center}
.fake { color: #7f7f7f;}
.gateway-method {
    padding: 15px; font-family: "Source Code Pro", monospace; justify-content: space-around;
    font-weight: bold; font-size: x-large; align-items: center; width: 120px;  color: #efefef
}
.gwm-get {background-color: darkslategray;}
.gwm-post {background-color: darkgreen;}
.gwm-put {background-color: blueviolet; color: #efefef}
.gwm-delete {background-color: darkred; color: #efefef}
.padding-15 { padding: 15px;}
#gateway-list, .gateway-item {margin: 0 auto 10px; list-style: none; padding: 0; }
.gateway-item {border: 1px solid #ccc; height: fit-content}
#dialog .modal-dialog {min-width: 750px; /*max-width: 65%*/}
.gateway-uri {font-family: "Source Code Pro", monospace; font-size: 16px;}
.multiline-text {height: 128px;}
.inline-button {border: 1px solid #fff; padding: 10px; cursor: pointer; color: #888; text-decoration: none}
.inline-button:hover {border-color: #d0d0d0; text-decoration: none}
.line {padding: 10px 0}
.param-table {width: 100%}
/*td.param-name {text-align: right; padding: 0 10px;}*/
pre#invoke-result-content { padding: 10px; overflow: visible;}
.scroll-wrapper {height: 240px; overflow: auto; border:1px solid #ccc; margin-top: 10px;}
.scroll-wrapper::-webkit-scrollbar { width: 5px; height: 5px; }
.scroll-wrapper::-webkit-scrollbar-track { background: #dfdfdf; border-radius: 5px;}
.scroll-wrapper::-webkit-scrollbar-thumb,
.scroll-wrapper::-webkit-scrollbar-corner {
    background: #999; border-radius: 5px;
}
.scroll-wrapper::-webkit-scrollbar-thumb:hover,
.scroll-wrapper::-webkit-scrollbar-thumb:active {
    background: #888; border-radius: 5px;
}

#hint-table {display: none; position: fixed; z-index: 2000; background-color: #fff; border: 1px solid #ccc;}
#hint-table table, #hint-table td, #hint-table th {border: 1px solid #ccc; border-collapse: collapse}
#hint-table td, #hint-table th {padding: 10px; color: #333; cursor: default}
.code-name, .code-type {white-space: nowrap}
#invoker .gateway-code {font-weight: bold}
#invoker .gateway-label {display: inline-block; width: 80px; padding: 5px;}
#btn-show-help {color: #cfab29; cursor: pointer}

#log-list, #log-list li {list-style: none; padding: 0; margin: 0;}
.log-item {width: 100%; margin-bottom: 15px;}
.log-item, .log-item td {border: 1px solid #ccc; border-collapse: collapse}
.log-item td {white-space: nowrap; vertical-align: top; padding: 5px 10px;}
.log-uri {width: 100%}
.log-label {text-align: right; background-color: #efefef}

.edit-table-header {background-color: #7f7f7f; font-weight: normal; color: #fff;}
.http-header-handler {width: 26px;}
.http-header-name {width: 288px;}
.http-header-value {width: 404px;}
.http-header-button {cursor: pointer; color: #666; padding-left: 10px;}
.http-header-button.disabled {color: #ccc;}

.editable-table .selected-row {background-color: #efefef}
.http-headers, .http-headers td {border: 1px solid #ccc; border-collapse: collapse}
.http-headers td {padding: 5px 10px;}
.http-headers .http-header-name, .http-headers .http-header-value {background: #7f7f7f; color: #fff}
.data-cell {font-family: "Source Code Pro", monospace}
.collapsed {display: none}
/*#dialog .modal-body {max-height: 750px; overflow-y: auto;}*/